import {
	Component,
	OnInit,
	HostBinding,
	trigger,
	state,
	style,
	transition,
	animate
} from '@angular/core';

import { ActivatedRoute, Router, Params } from '@angular/router';

import { Bearing } from '../scheme/bearing';
import { BearingService } from '../scheme/bearing.service';

import { TableComponent } from '../table/table.component';

@Component({
	moduleId: module.id,
	selector: 'my-bearing-list',
	templateUrl: 'bearing-list.component.html',
	animations: [
		trigger('routeAnimation', [
			state('*',
				style({
					opacity: 1,
					transform: 'translateX(0)'
				})
			),
			transition('void => *', [
				style({
					opacity: 0,
					transform: 'translateX(-15%)'
				}),
				animate('0.35s ease-in-out')
			])
		])
	]
})
export class BearingListComponent implements OnInit {
	@HostBinding('@routeAnimation') get routeAnimation() {
		return true;
	}

	@HostBinding('style.display') get display() {
		return 'block';
	}

	selectedBear: Bearing;
	bears: Bearing[];

	constructor(
		private bearingService: BearingService,
		private route: ActivatedRoute,
		private router: Router
	) { };

	onChoose(bear: Bearing) {
		this.selectedBear = bear;
		this.router.navigate([bear.id], { relativeTo: this.route });
	};

	ngOnInit(): void {
		this.bearingService.getBearing().then(
			result => {
				this.bears = result;
			}
		);
	};
}